<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="欢迎注册小v商城" left-arrow @click-left="back"/>
    </header>
    <section class="content">
      <div class="bgImg">
        <van-image src="https://plogin.m.jd.com/mreg/static/img/pwd_icon.fa526d8.png" />
      </div>
      <p class="sendinfo">
        请设置登录密码
      </p>
      <van-field v-model="password" :type="type" placeholder="请输入8到20位登录密码" clearable :right-icon="righticon" @click="changeIcon"></van-field>
      <p class="tip" v-if="password === ''">密码由8-20位字母、数字或半角符号组成</p>
      <p class="error" v-else-if="password.length < 8 || password.length > 20 || !reg.test(password)">密码长度需在8-20位字符之间</p>
      <p class="error" v-else></p>
      <van-button class="mybtn" @click="register" block round :disabled="pwdflag" color="linear-gradient(to left, #ff6034, #ee0a24)">完成</van-button>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Image as VanImage, Toast } from 'vant'
import { dosetpassword } from '@/api'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(VanImage)
Vue.use(Toast)

export default {
  data () {
    return {
      password: '',
      reg: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/,
      type: 'password',
      righticon: 'closed-eye'
    }
  },
  mounted () {

  },
  methods: {
    changeIcon () {
      if (this.type === 'password') {
        this.righticon = 'eye-o'
        this.type = 'text'
      } else {
        this.righticon = 'closed-eye'
        this.type = 'password'
      }
    },
    back () {
      Dialog.confirm({
        message: '点击"返回"将中断注册，确定返回吗?',
        messageAlign: 'left',
        theme: 'round'
      })
        .then(() => {
          // on confirm
          this.$router.back()
        })
        .catch(() => {
          // on cancel
        })
    },
    register () {
      dosetpassword({
        tel: localStorage.getItem('mobile'),
        password: this.password
      }).then(res => {
        Dialog.alert({
          message: '注册成功，登录手机号位\n' + localStorage.getItem('mobile')
        }).then(() => {
          // 去登陆页面
          Toast('注册成功')
          this.$router.replace('/login')
        })
      })
    }
  },
  computed: {
    pwdflag () {
      if (this.reg.test(this.password)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  padding: 0 25px 25px;
  background: #fff;
  .content{
    .bgImg{
      .van-image{
      display: block;
      width: 0.88rem;
      margin:10px auto 20px;
      }
    }
    .sendinfo{
      margin: 10px 106px 20px;
    }
    .van-field{
      border-bottom: 1px solid #ccc;
    }
    .tip{
      padding-left: 10px;
      font-size: 0.14rem;
      color: #999;
      margin-top: 5px;
    }
    .error{
      margin-top: 5px;
      color: rgb(255, 80, 80);
      padding-left: 10px;
      font-size: 0.14rem;
    }
    .mybtn{
      margin-top: 30px;
    }
  }
}
</style>
